<template>
	<!-- 实名认证 -->
	<view id="app-wrapper">
		<!-- 身份上传 -->
		<view class="wrap-header">
			<view class="header-title">请拍摄并上传你的身份证照片</view>
			<view class="header-item">
				<view @click="headlePhoto(1)" class="item-cards">
					<view class="cards-image">
						<img v-show="show1" :src="photo1"  mode="widthtFix"></img>
						<view v-show="!show1" class="item-fail">
							<img :src="failPhoto" class="cards-image" mode="widthtFix"></img>
							<view>识别失败，点击重新上传！</view>
						</view>
					</view>
					
					<view class="cards-text">身份证正面照</view>
					
				</view>
				<view @click="headlePhoto(2)" class="item-cards">
					<view class="cards-image">
						<img v-show="!show2" :src="photo2"  mode="widthtFix"></img>
						<view v-show="show2" class="item-fail">
							<img :src="failPhoto" class="cards-image" mode="widthtFix"></img>
							<view>识别失败，点击重新上传！</view>
						</view>
					</view>
					<view class="cards-text">手持身份证照</view>
				</view>
			</view>
		</view>
		<!-- 拍摄要求介绍 -->
		<view class="wrap-nav">
			<view class="nav-title">拍摄身份证要求</view>
			<view class="nav-box">
				<view class="box-desc">
					<view>大陆公民持有的本人有效二代身份证；</view>
					<view>拍摄时确保身份证<text class="desc-color">边框完整，字体清晰，亮度均匀;</text></view>
				</view>
				<view class="box-cards">
					<view class="cards-item">
						<img class="item-image" mode="widthFix" src="http://cdn.yupao.com/newyupao/images/gl/idcard-yes.png" alt="" />
						<view>标准</view>
					</view>
					<view class="cards-item">
						<img class="item-image" mode="widthFix" src="http://cdn.yupao.com/newyupao/images/gl/idcard-bkqs.png" alt="" />
						<view>边框缺失</view>
					</view>
					<view class="cards-item">
						<img class="item-image" mode="widthFix" src="http://cdn.yupao.com/newyupao/images/gl/idcard-qs.png" alt="" />
						<view>照片模糊</view>
					</view>
					<view class="cards-item">
						<img class="item-image" mode="widthFix" src="http://cdn.yupao.com/newyupao/images/gl/idcard-sg.png" alt="" />
						<view>闪光强烈</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 信息识别修改 -->
		<view  v-show="true" class="wrap-main">
			<u-form  :model="userInfo" ref="uForm">
				<u-form-item label-width="150" label="姓名"><u-input placeholder="请输入姓名"  v-model="userInfo.name" /></u-form-item>
				<u-form-item label-width="150" label="性别"><u-input placeholder="请选择性别" v-model="userInfo.gender" type="select" /></u-form-item>
				<u-form-item label-width="150" label="出生日期"><u-input placeholder="请选择出生日期" v-model="userInfo.birthday" type="select" /></u-form-item>
				<u-form-item label-width="150" label="民族"><u-input placeholder="请选择民族" v-model="userInfo.nation" type="select" /></u-form-item>
				<u-form-item label-width="150" label="身份证号"><u-input placeholder="请填写身份证号" v-model="userInfo.cardID" /></u-form-item>
				<u-form-item label-width="150" label="详细地址"><u-input placeholder="请填写详细地址" v-model="userInfo.address" /></u-form-item>
			</u-form>
		</view>
		<!-- 信息提交 -->
		<view class="wrap-footer">
			<view class="submit-btn">身份认证</view>
			<view class="hint"><text>提示：</text>如部分信息未识别成功，请手动修改!</view>
		</view>
		<!-- 照片上传方式 -->
		<u-action-sheet @click="handleClick" :list="list" v-model="show" :cancel-btn="true"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				failPhoto:'http://cdn.yupao.com/newyupao/images/gl/upload-fail-icon.png',
				photo1:'http://cdn.yupao.com/newyupao/images/gl/idcard-l.png',
				photo2:'http://cdn.yupao.com/newyupao/images/gl/idcard-z.png',
				userInfo:{
					name:'',
					gender:'',
					birthday:'',
					nation:'',
					cardID:'',
					address:''
				},
				show:false,
				show1:false,
				show2:false,
				list:[{
					text:'相册选择',
					value:'album'
				},
				{
					text:'相机拍照',
					value:'camera'
				}]
			}
		},
		methods: {
			headlePhoto(status){
				// 1 身份证 2 手持身份证
				this.show = true
			},
			getPhoto(photoType){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: [ 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: [photoType], //从相册选择
				    success: function (res) {
						this.show1 = true
						
				        console.log(JSON.stringify(res.tempFilePaths));
				    }
				});
			},
			handleClick(index){
				this.getPhoto(this.list[index].value)
			}
		}
	}
</script>

<style scoped lang="scss">
	#app-wrapper {
		background-color: #f7f6f9;
		.wrap-header {
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;

			.header-title {
				padding: 20rpx 0;
				font-size: 30rpx;
				font-weight: 600;
			}

			.header-item {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.item-cards {
					width: 48%;
					.cards-image {
						width: 100%;
						height: 230rpx;
						img{
							width: 100%;
						}
						.item-fail{
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							align-items: center;
							width: 100%;
							height: 230rpx; 
							background-color: #f4f8fe;
							img{
								width: 120rpx;
								height: 120rpx;
							}
							view{
								font-size: 24rpx;
								color:#ff6b09;
							}
						}
					}

					.cards-text {
						z-index: 9;
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						color: #fff;
						background-color: #108eef;
						border-radius: 0 0 10rpx 10rpx;
					}
				}
			}
		}
	
		.wrap-nav {
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			.nav-title{
				padding: 20rpx 0;
				font-size: 30rpx;
				font-weight: 600;
			}
			.nav-box{
				.box-desc{
					font-size: 28rpx;
					color:#8f8f94;
					.desc-color{
						color:red;
					}
				}
				.box-cards{
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
					.cards-item{
						width: 23%;
						.item-image{
							width: 100%;
						}
						view{
							margin-top: -10rpx;
							font-size: 28rpx;
							color:#8f8f94;
							text-align: center;
						}
					}
				}
			}
		}
		.wrap-main{
			padding: 0 20rpx;
			background-color: #fff;
		}
		.wrap-footer {
			width: 100%;
			margin-top: 60rpx;
			.submit-btn{
				width: 60%;
				margin: auto;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: 600;
				color:#fff;
				border-radius: 10rpx;
				background-color: #0099ff;
				text-align: center;
			}
			.hint{
				padding: 20rpx 0;
				color:#8f8f94;
				font-size: 24rpx;
				text-align: center;
				text{
					color:red;
				}
			}
		}
	}
</style>
